"use client";

import { useEffect, useState } from 'react';

export function SakuraPetals() {
  const [petals, setPetals] = useState<JSX.Element[]>([]);

  useEffect(() => {
    const createPetals = () => {
      const petalCount = 20;
      const newPetals = Array.from({ length: petalCount }).map((_, i) => {
        const style = {
          left: `${Math.random() * 100}vw`,
          animationDuration: `${Math.random() * 5 + 5}s`,
          animationDelay: `${Math.random() * 5}s`,
        };
        return <div key={i} className="sakura-petal" style={style} />;
      });
      setPetals(newPetals);
    };

    createPetals();
  }, []);

  return <div aria-hidden="true">{petals}</div>;
}
